import React, { useEffect, useState } from 'react';
import EChartsReact from 'echarts-for-react';
import List1 from '../../../../../assets/Json/Line1/2023';
import List2 from '../../../../../assets/Json/Line1/2024';

const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'];

function LineOneComponent({ year }) {
  const [option, setOption] = useState({});

  useEffect(() => {
    // 根据年份选择数据源
    const dataList = year == 2023 ? List1 : List2;
console.log(dataList)
    const seriesData = dataList.map(item => ({
      name: item.name,
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: month.map((v, index) => parseFloat(item[Object.keys(item)[index + 2]]))
    }));


    setOption({
      title: {
        text: "结算数据",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: dataList.map(item => item.name),
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: month,
        },
      ],
      yAxis: [
        {
          type: "value",
          name: '万', // Y轴顶部添加单位
          nameLocation: 'end', // 位置设置为Y轴顶部
         
        },
      ],
      series: seriesData,
    });
  }, [year]);

  return (
    <EChartsReact style={{ width: "100%", height: "355px", margin: "5px 0" }} option={option} />
  );
}

export default LineOneComponent;
